<!--
 * @Autor: 王琛
 * @Description: 主页
 * @Copyright: 版权归个人所有
-->
<style lang="stylus" scoped>
#home {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;

  & > * {
    width: 100%;
    height: 100%;
  }

  video {
    width: calc(100vh - 57px);
    height: 100vw;
    transform: rotate(90deg);
    transform-origin: 0 0;
    margin-top: 0%;
    margin-left: 100%;

  }
}
</style>


<template>
  <div id="home">
    <!-- 三方网站 -->
    <iframe v-if="_data.pageType == 'iframe'" :src="_data.url"></iframe>
    <!-- 视频内嵌 -->
    <video v-if="_data.pageType == 'video'" autoplay muted controls :src="_data.url"></video>
    <!-- 图片展示 -->
    <img v-if="_data.pageType == 'img'" :src="_data.url" alt="" srcset="">
  </div>
</template>


<script setup lang="ts">
import {onMounted, reactive, watch} from "vue";
import {useRouter, useRoute} from "vue-router";
import {useStore} from "vuex";

const _props = defineProps({
  config: {
    type: Object,
    default: () => {
      return {
        assembly: false,
        pageType: ""
      }
    }
  }
});
const _router = useRouter();
const _route = useRoute();
const _data = reactive({
  // 网页地址
  url: "",
  // 网页类型
  pageType: "",
});

onMounted(() => {
  console.log('%c王琛-140515', 'color:#fff;background:#ee6f57;padding:3px;border-radius:2px', _route.query);
  // 判断是否是组件形式
  _props.config?.assembly ? init(_props.config) : init(_route.query)
})

watch(() => _route.query, (newQuery) => {
  init(newQuery)
})

/**
 * @description: 初始化页面数据
 * @author: 王琛
 * @Date: 2022-11-03 14:06:21
 * @param {*}
 * @return {*}
 */

interface initConfig_inter {
  pageType: string,
  url: string
}

function init(config: initConfig_inter): void {

  _data.pageType = config.pageType;
  _data.url = config.url;
}


</script>

